import React, { useEffect, useState, useRef } from 'react';
import PageTitle from '@/components/pageTitle';
import { Row, Button, Table, Form, Input, message } from 'antd';
import Icon from '@/components/layout/Icon';
import MyModal from '@/components/modal';
import { getListApi, addRoleApi, editRoleApi, deleteRoleApi } from '@/request/role';
import styles from './index.module.css';

const Role = () => {
  const [isEdit, setEdit] = useState<boolean>(false);
  const [dialog, setDialog] = useState(false);
  const [roleList, setRoleList] = useState<any>([]);
  const [form] = Form.useForm();
  const curRecord = useRef<any>({});
  const [confirmDialog, setConfirmDialog] = useState<boolean>(false); // 二次确认弹框

  const getList = async () => {
    try {
      const res = await getListApi();
      setRoleList(res);
    } catch (err) {
      console.log(err);
    }
  };

  const handleEdit = (record) => {
    setEdit(true);
    setDialog(true);
    form.setFieldsValue(record);
  };

  const handleShowConfirm = (record) => {
    curRecord.current = record;
    setConfirmDialog(true);
  };

  const columns: any = [
    {
      dataIndex: 'roleName',
      title: '角色名称',
      width: 300,
    },
    {
      dataIndex: 'opreation',
      title: '操作',
      width: 10,
      render(text, record) {
        return (
          <div className={styles.linkBtn}>
            <div
              className={styles.link}
              onClick={() => {
                handleEdit(record);
              }}
            >
              编辑
            </div>
            <div
              className={styles.link}
              onClick={() => {
                handleShowConfirm(record);
              }}
            >
              删除
            </div>
          </div>
        );
      },
    },
  ];

  const handleOk = async () => {
    const data = form.getFieldsValue();
    try {
      let res;
      if (isEdit) {
        res = await editRoleApi(data);
      } else {
        res = await addRoleApi(data);
      }
      if (res) {
        getList();
        setDialog(false);
        form.resetFields();
      }
    } catch (err: any) {
      console.log(err.message);
    }
  };

  const handleDelete = async (record) => {
    const { _id } = record;
    try {
      const res = await deleteRoleApi({ _id });
      if (res) {
        message.success('删除成功');
        getList();
        setConfirmDialog(false);
      }
    } catch (err: any) {
      console.log(err.message);
    }
  };

  useEffect(() => {
    getList();
  }, []);

  return (
    <div className="role-manage">
      <PageTitle title="角色管理" />
      <Row justify="space-between">
        <div className={styles.title}>角色列表</div>
        <Button
          className="flex"
          type="primary"
          icon={<Icon src="/images/add.png" width={16} height={16} style={{ marginRight: '4px' }} />}
          onClick={() => {
            setEdit(false);
            setDialog(true);
          }}
          style={{ marginBottom: '20px' }}
        >
          添加
        </Button>
      </Row>
      <Table dataSource={roleList} columns={columns}></Table>
      <MyModal
        width={600}
        title={isEdit ? '编辑角色' : '新增角色'}
        destroyOnClose
        open={dialog}
        onOk={() => {
          handleOk();
        }}
        onCancel={() => {
          setDialog(false);
          form.resetFields();
        }}
      >
        <Form labelCol={{ flex: '80px' }} wrapperCol={{ span: 20 }} form={form} colon={false}>
          <Form.Item label="" name="_id" hidden>
            <Input placeholder="请输入角色名称" />
          </Form.Item>
          <Form.Item label="角色名称" name="roleName" style={{ marginBottom: '0' }}>
            <Input placeholder="请输入角色名称" />
          </Form.Item>
        </Form>
      </MyModal>
      {/* 确认删除 */}
      <MyModal
        destroyOnClose
        title="提示"
        open={confirmDialog}
        width={600}
        onCancel={() => {
          setConfirmDialog(false);
          curRecord.current = {};
        }}
        onOk={() => {
          handleDelete(curRecord.current);
        }}
      >
        <div style={{ padding: '30px 0' }}>{`确认删除 “${curRecord.current.roleName as string}” 吗？`}</div>
      </MyModal>
    </div>
  );
};

export default Role;
